<template>
	<view class="container">
		<view class="old-time select-new">
			<view class="tab-btn">
				<button :class="[dayType == 'week' ? 'select':'']" @click="dayTypeChange('week')">每周</button>
				<button :class="[dayType == 'month' ? 'select':'']" @click="dayTypeChange('month')">每月</button>
			</view>
		</view>
		<view class="select-week" v-if="dayType == 'week'">
			<view class="w-item" v-for="(item,i) in weekList" :key="i" @click="weekChange(item)">
				<text>{{item.text}}</text>
				<view class="checkbox">
					<image v-if="weekValues.includes(item.value)" :src="$img_path('/pagesMine/6.png')" mode="widthFix"></image>
					<image v-else :src="$img_path('/pagesMine/7.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="old-time select-date" v-if="dayType == 'month'">
			<view class="title">
				每月最多选择5天
			</view>
			<view class="week-box">
				<view class="w-i">
					周日
				</view>
				<view class="w-i">
					周一
				</view>
				<view class="w-i">
					周二
				</view>
				<view class="w-i">
					周三
				</view>
				<view class="w-i">
					周四
				</view>
				<view class="w-i">
					周五
				</view>
				<view class="w-i">
					周六
				</view>
			</view>
			<view class="date-item">
				<view class="item"
					:class="[dateVlaue.includes(item.value) ?'select':'', !dateVlaue.includes(item.value)&&dateVlaue.length==5?'disabled':'']"
					v-for="(item,index) in DateList" :key="index" @click="checkDay(item)">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>


		<view class="select-time">
			<picker-view class="time-picker" indicator-style="height: 50px;" indicator-class="indicator"
				mask-class="maskClass" :immediate-change="true" :value="timeValue" @change="bindTimeChange">
				<picker-view-column v-for="(item, index) in timeCol" :key="index">
					<view class="hours item" v-for="(val,i) in item" :key="i">
						{{val < 10 ? '0'+val : val}}
					</view>
				</picker-view-column>
				<!-- <picker-view-column>
					<view class="second item">
						00
					</view>
					<view class="second item">
						30
					</view>
				</picker-view-column> -->
			</picker-view>
			<view class="m">
				:
			</view>
			<view class="bg-border">
				<view></view>
				<view></view>
				<view></view>
				<view></view>
			</view>
		</view>



		<view class="bottom-btn">
			<view class="b-btn">
				<view class="b">
					<button @click="confirm">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weekList: [{
					text: '周一',
					value: '1'
				}, {
					text: '周二',
					value: '2'
				}, {
					text: '周三',
					value: '3'
				}, {
					text: '周四',
					value: '4'
				}, {
					text: '周五',
					value: '5'
				}, {
					text: '周六',
					value: '6'
				}, {
					text: '周日',
					value: '7'
				}, ],
				weekValues: [],
				timeValue: [0, 0],
				DateList: [],
				dateVlaue: [],
				dayType: 'week',
				
				timeCol: [[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23], [0,30]]
			};
		},
		onLoad(options) {
			console.log("options", options)
		},
		onShow() {
			this.initDate()
		},
		methods: {
			initDate() {
				let dayDATA = this.$dayjs()
				let YM = dayDATA.format('YYYY-MM') + '-01'
				let first_week = this.$dayjs(YM).day()
				let daysInMonth = dayDATA.daysInMonth()
				let nowDay = dayDATA.date()
				for (let i = 0; i < first_week; i++) {
					this.DateList.push({
						text: '',
						value: null
					})
				}
				for (let i = 0; i < daysInMonth; i++) {
					this.DateList.push({
						text: i + 1,
						value: i + 1
					})
				}
			},

			checkDay(item) {
				let value = this.dateVlaue
				if (value.length < 5) {
					if (value.includes(item.value)) {
						let i = value.indexOf(item.value)
						value.splice(i, 1)
					} else {
						value.push(item.value)
					}
				} else {
					if (value.includes(item.value)) {
						let i = value.indexOf(item.value)
						value.splice(i, 1)
					}
				}
				this.dateVlaue = value
			},

			bindTimeChange(e) {
				console.log("bindTimeChange e", e)
				this.timeValue = e.detail.value
			},

			dayTypeChange(type) {
				this.dayType = type
			},
			
			weekChange(week) {
				if (this.weekValues.includes(week.value)) {
					this.weekValues = this.weekValues.filter(item => item != week.value)
				} else {
					this.weekValues.push(week.value)
				}
			},
			
			confirm() {
				let time = []
				this.timeValue.forEach((item,index) => {
					let value = this.timeCol[index][item]
					value = value < 10 ? '0' + value : value
					time.push(value)
				})
				const data = {
					time: time.join(':'),
					type: this.dayType,
					values: []
				}
				if (this.dayType == 'week') {
					data.values = this.weekValues.sort()
				} else {
					data.values = this.dateVlaue.sort()
				}
				console.log("确认  data", data)
				uni.$emit('updateServiceTime', { data })
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.container {
		.tip {
			font-weight: bold;
			font-size: 32rpx;
			color: #E72A2A;
			line-height: 44rpx;
			padding: 22rpx;
			box-sizing: border-box;
			background: #FFEEEE;
		}

		.old-time {
			padding: 20rpx 22rpx;
			box-sizing: border-box;

			.title {
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;
				line-height: 48rpx;
			}

			.value {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				margin-top: 20rpx;
			}
		}

		.select-new {
			border-top: 20rpx solid #F8F8F8;

			.tab-btn {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				button {
					width: 340rpx;
					height: 96rpx;
					background: #F5F5F5;
					border-radius: 20rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #999999;
					line-height: 96rpx;

					&.select {
						background: linear-gradient(90deg, #FFA233 0%, #FB4C4C 100%);
						color: #FFFFFF;
					}
				}
			}
		}

		.select-week {
			padding: 0 22rpx;
			box-sizing: border-box;
			border-top: 20rpx solid #F8F8F8;
			display: flex;
			flex-wrap: wrap;

			.w-item {
				width: 50%;
				border-bottom: 2rpx solid #F8F8F8;
				padding: 24rpx 0;

				&:nth-last-child(1),
				&:nth-last-child(1) {
					border-bottom: none;
				}

				&:nth-child(odd) {
					width: calc(50% - 2rpx);
					border-right: 2rpx solid #F8F8F8;
					padding-right: 42rpx;
				}

				&:nth-child(even) {
					padding-left: 40rpx;
				}

				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.checkbox {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.select-date {
			padding: 0;
			border-top: 20rpx solid #F8F8F8;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				padding: 32rpx 22rpx 0;
			}

			.week-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.w-i {
					width: calc(100% / 7 - 12rpx);
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					// margin: 0 22rpx;
					text-align: center;
				}
			}

			.date-item {
				display: flex;
				flex-wrap: wrap;
				margin-top: 2rpx;
				padding: 0 0rpx;
				box-sizing: border-box;

				.item {
					width: calc(100% / 7 - 12rpx);
					padding-bottom: calc(100% / 7 - 12rpx);
					margin: 10rpx 6rpx 0;
					position: relative;
					border-radius: 16rpx;

					text {
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translateX(-50%) translateY(-50%);
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}

					&.select {
						background-color: #E72A2A;

						text {
							color: #FFFFFF;
							font-weight: 800;
						}
					}

					&.disabled {
						text {
							color: #999999;
						}
					}
				}

			}
		}

		.select-time {
			padding: 0 22rpx;
			box-sizing: border-box;
			border-top: 20rpx solid #F8F8F8;
			position: relative;

			.time-picker {
				width: 100%;
				height: 250px;

				.item {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 50px;
					text-align: center;
					// border-bottom: 2rpx solid #F8F8F8;
				}

				/deep/ .maskClass {
					opacity: 0;
				}

				/deep/ .indicator {
					opacity: 0;
				}
			}

			.m {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
				z-index: 3;
				font-weight: 800;
				font-size: 40rpx;
				color: #333333;
				line-height: 50px;
			}

			.bg-border {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
				padding: 0 22rpx;
				box-sizing: border-box;

				&>view {
					width: 100%;
					height: 49px;
					border-bottom: 1px solid #F8F8F8;
					background-color: transparent;
				}
			}
		}
	}

	.bottom-btn {
		width: 100%;
		height: calc(136rpx + constant(safe-area-inset-bottom));
		height: calc(136rpx + env(safe-area-inset-bottom));

		.b-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.b {
				padding: 20rpx 22rpx;
				box-sizing: border-box;

				button {
					height: 96rpx;
					background: linear-gradient(132deg, #FFA233 0%, #FB4C4C 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 96rpx;
				}
			}
		}
	}
</style>